<template>
  <div class="addUsers" @click="$event.stopPropagation()">
    <div class="box">
      <div class="addTitle">
        <h2>{{ title }}</h2>
        <el-icon @click="close"><Close /></el-icon>
      </div>
      <div class="addInput">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name" size="large" />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input v-model="ruleForm.passWord" size="large" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" size="large" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" size="large" />
          </el-form-item>
        </el-form>
      </div>
      <div class="addButton">
        <el-button size="large" @click="cancel">取消</el-button>
        <el-button type="primary" size="large" @click="addition">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Close } from '@element-plus/icons-vue'
import { useCounterStoreB } from '@/stores/temporary'
import { homeAdd } from '@/api/homeAdd'
const title = ref('添加用户')
const StoreB = useCounterStoreB()
const showAddUsers = ref(StoreB.addState)
const ruleFormRef = ref()
const ruleForm = reactive<RuleForm>({
  name: '',
  passWord: '',
  phone: '13666666666',
  email: '123456789@qq.com',
})
const close = () => {
  showAddUsers.value = !showAddUsers.value
  StoreB.stateFun(showAddUsers.value)
  ruleForm.name = ''
  ruleForm.passWord = ''
  ruleForm.phone = ''
  ruleForm.email = ''
}
interface RuleForm {
  name: string
  passWord: string
  phone: string
  email: string
}
const rules = reactive({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 3, max: 11, message: '长度在 3 到 11个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
  ],
})

const cancel = () => {
  close()
}
interface Props {
  data: {
    meta: {
      msg: string
    }
  }
}

const addition = async () => {
  try {
    // 表单验证
    await ruleFormRef.value.validate()
    // 发送请求
    const res = <Props>await homeAdd({
      username: ruleForm.name,
      password: ruleForm.passWord,
      mobile: ruleForm.phone,
      email: ruleForm.email,
    })
    console.log('add', res)
    if (res.data.meta.msg === '创建成功') {
      close()
      setTimeout(() => {
        location.reload()
      }, 500)
    }
  } catch {
    console.log('error')
  }
}

watch(
  () => StoreB.addState,
  (i) => {
    showAddUsers.value = i
  },
)
</script>

<style scoped>
.addUsers {
  .box {
    width: 80vw;
    height: 50vh;
    background: #fff;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .addTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        margin: 0px;
        color: #343739;
      }
    }
    .addInput {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .addButton {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }
  }
}
</style>
